<!--忘记密码页面-->
<template>
  <div class="fogotPwdContainer">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <div class="content">
      <div class="loginp">
        <img src="../../../static/image/usericon.png" class="username" />
        <input v-model="yhm" placeholder="请输入用户名" class="userinput" />
      </div>
      <div class="loginp loginpflex">
        <p>
          <img src="../../../static/image/mobile.png" class="usericon" />
          <input type="number" v-model="phone" placeholder="请输入手机号码" class="userinput" />
        </p>
        <button
          class="getyzm"
          :class="yzmdisabled==true?'getyzm1':''"
          @click="getyzmBut"
          :disabled="yzmdisabled"
        >
          <span class="minute">{{minute}}</span>
          {{getyzmText}}
        </button>
      </div>
      <div class="loginp loginp1">
        <img src="../../../static/image/yzm.png" class="useryzm" />
        <input v-model="yzm" placeholder="请输入验证码" class="userinput" type="number" />
      </div>
      <button @click="fogotPwdbut" class="loginbut">下一步</button>
    </div>
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
export default {
  components: {
    CommonBar
  },
  data() {
    return {
      options: {
        centerText: "找回密码",
        lefttype: "left"
      },
      phone: "",
      yzm: "",
      getyzmText: "获取验证码",
      minute: "",
      yzmdisabled: false,
      params: {},
      yzmcode: "",
      yhm: ""
    };
  },
  created() {
    let username = localStorage.getItem("AuthorizationUsername");
    if (username) {
      this.yhm = username;
    }
  },
  methods: {
    //下一步按钮
    fogotPwdbut() {
      // console.log("输入", this.yzm, "短信", this.yzmcode);
      if (this.yzm.length == 0) {
        this.$toast({
          message: "验证码不能为空！"
        });
      } else if (this.yzm != this.yzmcode) {
        this.$toast({
          message: "验证码不正确！"
        });
      } else {
        this.$router.push({
          //核心语句
          path: "/setPwd", //跳转的路径
          query: {
            yzmcode: this.yzmcode,
            username: this.yhm,
            userphone: this.phone
          }
        });
      }
    },
    //获取短信验证码
    getyzmBut() {
      /**验证手机号 */
      if (this.validatePhone()) {
        this.params = {
          phone: this.phone,
          username: this.yhm,
          type: 1
        };
        this.$http
          .get(`${this.$basePath}?service=App.Account.SendCode`, {
            params: this.params
          })
          .then(res => {
            if (res.ret == 200) {
              this.validateBtn();
              this.$toast({ message: res.msg });
              this.yzmcode = res.data.code;
              //console.log("短信", this.yzmcode);
              //console.log("短信验证数据", res);
            } else if (res.ret == 201) {
              this.$toast({ message: res.msg });
            } else {
              this.$toast({ message: res.msg });
            }
          });
      }
    },
    //验证手机号
    validatePhone() {
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (this.yhm.length == 0) {
        this.$toast({
          message: "用户名不能为空！"
        });
      } else if (this.phone.length == 0) {
        this.$toast({
          message: "手机号码不能为空！"
        });
      } else if (this.phone.length != 11) {
        this.$toast({
          message: "请输入有效的手机号码！"
        });
      } else if (!myreg.test(this.phone)) {
        this.$toast({
          message: "请输入有效的手机号码！"
        });
      } else {
        return true;
      }
    },
    //倒计时
    validateBtn() {
      //console.log("倒计时");
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.minute = "";
          this.yzmdisabled = false;
          this.getyzmText = "获取验证码";
        } else {
          this.minute = time;
          this.getyzmText = "秒后重试";
          this.yzmdisabled = true;
          time--;
        }
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/login.less";
.username {
  width: 12px;
  vertical-align: middle;
  margin-right: 15px;
}
.getyzm1 {
  background: linear-gradient(180deg, #ffaa16 0%, #ff6f16 100%) !important;
  color: #fff !important;
}
</style>